<template>
  <PageContainer>
    <Header v-model="headerHeight" title="搜索" :is-box-shadow="false">
      <template>
        <view class="hb-h-9 hb-bg-white hb-py-2 hb-pl-4 hb-flex hb-items-center hb-justify-center">
          <view
            class="hb-flex-1 hb-px-3 hb-h-full search hb-rounded-3xl hb-transition-colors hb-duration-200 hb-flex hb-items-center hb-justify-center hb-bg-F2F3F5"
          >
            <text class="ali-icon hb-mr-1 hb-text-base hb-mr-3">&#xe694;</text>
            <input
              v-model.trim="searchVal"
              class="hb-flex-1"
              focus
              type="text"
              confirm-type="search"
              :placeholder="placeholder"
              @confirm="confirm"
            />
          </view>
          <view class="hb-px-4" @click="confirm">
            <text style="font-size: 32rpx">搜索</text>
          </view>
        </view>
      </template>
    </Header>
    <view class="hb-bg-white" :style="{ height: `calc(100vh - ${headerHeight}px)` }">
      <view class="hb-px-4 hb-py-3">
        <view class="hb-flex hb-items-center hb-justify-between">
          <text style="font-size: 32rpx">搜索历史</text>
          <text
            class="ali-icon icon-shanchu"
            style="font-size: 42rpx; color: #999996; margin-left: 8rpx"
            @click="clear"
          ></text>
        </view>
        <view class="hb-my-3 hb-flex hb-flex-row hb-flex-wrap hb-gap-3">
          <template v-for="v in searchHistoryList" :key="v.id">
            <view class="tag" @click="handleTagClick(v)">
              <text class="text">{{ v.key }}</text>
              <text
                class="ali-icon icon-guanbi2"
                style="color: #999996; padding: 4rpx"
                @click.stop="handleTagClose(v)"
              ></text>
            </view>
          </template>
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  /* searchPage 搜索 */
  import { getUrlName, navigateBack, onLoad } from '@/router';
  import type { SearchPage } from '@/router/types/modules';
  import type { PagesType } from '@/router/types/pages';
  import { useSearchHistoryStoreWithOut, type SearchHistoryVal } from '@/store/modules/searchHistory';
  import { Toast } from '@/utils';
  import { ref, unref } from 'vue';

  const { getSearchHistory, createSearchHistoryItem, setSearchHistory, delSearchHistory } =
  useSearchHistoryStoreWithOut();
  const page = getCurrentPages();
  const route = page.at(-2)?.route;
  const routeName = getUrlName(route) as PagesType;
  const headerHeight = ref(87);

  const searchHistoryList = ref<SearchHistoryVal[]>([]);
  if (routeName) searchHistoryList.value = getSearchHistory(routeName) || [];
  const placeholder = ref('搜索');
  const searchVal = ref('');
  let success: SearchPage['success'];

  onLoad<'searchPage'>((op) => {
    placeholder.value = op.placeholder;
    success = op.success;
  });

  function clear() {
    uni.showModal({
      title: '提示',
      content: '确定清空搜索历史吗？',
      success: (res) => {
        if (res.confirm) {
          delSearchHistory(routeName);
          searchHistoryList.value = [];
        }
      },
    });
  }

  function handleTagClick(item: SearchHistoryVal) {
    const newItem = createSearchHistoryItem(item.key);
    if (item) {
      item.updateTime = newItem.createTime;
      item.count += 1;
    }
    callback(item.key);
  }

  function handleTagClose(item: SearchHistoryVal) {
    searchHistoryList.value = searchHistoryList.value.filter((v) => v.id !== item.id);
    setSearchHistory(routeName, unref(searchHistoryList));
  }

  function confirm() {
    const val = searchVal.value;
    if (!val) return Toast('请输入搜索内容');
    const item = searchHistoryList.value.find((v) => v.key === val);
    const newItem = createSearchHistoryItem(val);
    if (item) {
      item.updateTime = newItem.createTime;
      item.count += 1;
    } else {
      searchHistoryList.value.push(newItem);
    }
    callback(val);
  }

  function callback(val: string) {
    setSearchHistory(routeName, unref(searchHistoryList));
    success?.(val);
    navigateBack();
  }
</script>

<style lang="scss" scoped>
  .hb-h-9 {
    height: 72rpx;
  }
  .hb-bg-white {
    background-color: white;
  }
  .hb-my-3 {
    margin-top: 24rpx;
    margin-bottom: 24rpx;
  }
  .hb-py-2 {
    padding-top: 16rpx;
    padding-bottom: 16rpx;
  }
  .hb-py-3 {
    padding-top: 24rpx;
    padding-bottom: 24rpx;
  }
  .hb-px-3 {
    padding-left: 24rpx;
    padding-right: 24rpx;
  }
  .hb-px-4 {
    padding-left: 32rpx;
    padding-right: 32rpx;
  }
  .hb-pl-4 {
    padding-left: 32rpx;
  }
  .hb-flex {
    display: flex;
  }
  .hb-items-center {
    align-items: center;
  }

  .hb-justify-center {
    justify-content: center;
  }
  .hb-flex-1 {
    flex: 1;
  }
  .hb-h-full {
    height: 100%;
  }
  .hb-rounded-3xl {
    border-radius: 48rpx;
  }
  .hb-transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .hb-duration-200 {
    transition-duration: 200ms;
  }
  .hb-text-base {
    font-size: 32rpx;
    line-height: 48rpx;
  }
  .hb-mr-3 {
    margin-right: 24rpx;
  }
  .hb-mt-3 {
    margin-bottom: 24rpx;
  }
  .hb-flex-row {
    flex-direction: row;
  }
  .hb-flex-wrap {
    flex-wrap: wrap;
  }
  .hb-bg-F2F3F5 {
    background-color: #f2f3f5;
  }
  .hb-gap-3 {
    gap: 24rpx;
  }

  .tag {
    background-color: #f2f3f5;
    border-radius: 8rpx;
    padding: 4rpx 20rpx;
    display: flex;
    align-items: center;
    gap: 16rpx;
    .text {
      font-size: 24rpx;
    }
  }
</style>
